<!doctype html>
<html>
<head>
  <title>prettify-element Demo</title>

  <script src="../platform/platform.js"></script>
  <link rel="import" href="prettify-element.html">

</head>
<body unresolved>

  <p>Highlight from text value:</p>
  <hr>

  <prettify-element text='<!DOCTYPE html>
<title>Title</title>

<style>body {width: 500px;}</style>

<script type="application/javascript">
  function $init() {return true;}
</script>

<body>
  <p checked class="title" id="title">Title</p>
  <!-- here goes the rest of the page -->
</body>'>
  </prettify-element>



  <p>Highlight text content:</p>
  <hr>

  <prettify-element>
# hello world

you can write text [with links](http://example.com) inline or [link references][1].

* one _thing_ has *em*phasis
* two __things__ are **bold**

---

hello world
===========

&lt;this_is inline="xml"&gt;&lt;/this_is&gt;

&gt; markdown is so cool

    so are code segments

1. one thing (yeah!)
2. two thing `i can write code`, and `more` wipee!

[1]: http://example.com
  </prettify-element>




  <p>Highlight using template:</p>
  <hr>

  <prettify-element>
    <template>
<div>
  <p>HTML is inert in <template></template>, we can use it to highlight 
  <strong>a subset</strong> of HTML directly without escaping.</p>
</div>
    </template>
  </prettify-element>

</body>
</html>
